<script setup>
import {ref} from "vue";

const isCollapse = ref(false)
const buttonName = ref('收起')
const menuTitle = ref('首页')
function collapse(){
 isCollapse.value = !isCollapse.value
  if(isCollapse.value){
    buttonName.value = '展开'
  }else{
    buttonName.value = '收起'
  }
}
</script>

<template>
  <div class="common-layout">
    <el-container  >
      <el-aside width="collapse">
        <el-menu router=true :collapse = "isCollapse"
                class="el-menu-vertical-demo dark">
          <el-menu-item index="/" @click="menuTitle='首页'">
            <el-icon>
              <i-ep-house/>
            </el-icon>
            <template #title>首页</template>
          </el-menu-item>
          <el-menu-item index="/user" @click="menuTitle='用户管理'">
            <el-icon>
              <i-ep-avatar />
            </el-icon>
            <template #title>用户管理</template>
          </el-menu-item>
          <el-menu-item index="/statistics" @click="menuTitle='数据统计'">
            <el-icon><i-ep-data-analysis /></el-icon>
            <template #title>数据统计</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header">
          <el-icon @click="collapse" v-show="!isCollapse" size="30"> <i-ep-fold /></el-icon>
          <el-icon @click="collapse" v-show="isCollapse" size="30"> <i-ep-expand /></el-icon>
          <p>{{menuTitle}}</p>
        </el-header>

        <el-main >
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.header {
  display: flex;
  align-items: center;
}
</style>
